<template>
  <div class="_wz_hiddenPerils">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <template #title>搜索</template>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="隐患排查">
          <Input v-model="formDataSearch.riskInspectName" placeholder="请输入隐患排查" clearable></Input>
        </FormItem>
        <FormItem label="排查类型">
          <i-select v-model.number="formDataSearch.riskInspectType" filterable placeholder="请选择排查类型" clearable>
            <Option :value="1">计划排查</Option>
            <Option :value="2">主动排查</Option>
          </i-select>
        </FormItem>
        <FormItem label="排查状态">
          <i-select v-model.number="formDataSearch.riskInspectState" filterable placeholder="请选择排查状态" clearable>
            <Option :value="0">未完成</Option>
            <Option :value="1">已完成</Option>
          </i-select>
        </FormItem>
        <FormItem label="隐患状态">
          <i-select v-model.number="formDataSearch.riskInspectDanger" filterable placeholder="请选择隐患状态" clearable>
            <Option :value="0">无隐患</Option>
            <Option :value="1">有隐患</Option>
          </i-select>
        </FormItem>
        <FormItem label="隐患清单">
          <Input v-model="formDataSearch.riskPositionName" placeholder="请输入隐患清单" clearable></Input>
        </FormItem>
        <!--        清单类型-->
        <FormItem label="清单类型">
          <i-select v-model.number="formDataSearch.riskPositionType" filterable placeholder="请选择清单类型" clearable>
            <Option :value="1">基础管理</Option>
            <Option :value="2">设备设施</Option>
            <Option :value="3">作业活动</Option>
          </i-select>
        </FormItem>
        <FormItem label="特种设备">
          <i-select v-model.number="formDataSearch.riskPositionDeviceState" filterable placeholder="请选择特种设备" clearable>
            <Option :value="0">否</Option>
            <Option :value="1">是</Option>
          </i-select>
        </FormItem>
        <FormItem label="排查部门">
          <Input v-model="formDataSearch.riskInspectInOrgName" placeholder="请输入排查部门" clearable></Input>
        </FormItem>
        <FormItem label="排查人员">
          <Input v-model="formDataSearch.riskInspectUserName" placeholder="请输入排查人员" clearable></Input>
        </FormItem>
        <FormItem label="经营企业">
          <i-input v-model="formDataSearch.deptName" placeholder="请输入经营企业" clearable />
        </FormItem>
        <FormItem label="开始日期">
          <DatePicker type="daterange" v-model="dateRange" placeholder="请选择到期日期" style="width:96%"></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <p slot="title"></p>

      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>


    <Drawer title="详情" v-model="seeMoreType" width="1200" :draggable="true">
      <hiddenPerilsDetails v-if="seeMoreType" :selectData="selectData"></hiddenPerilsDetails>
    </Drawer>

    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import hiddenPerilsDetails from "../dangerHandle/hiddenPerilsDetails.vue";
import wzTbale from "@/components/table/index.vue";

//reactive
export default defineComponent({
  name: 'hiddenPerils',//组件名称
  components: {
    wzTbale,//表格
    hiddenPerilsDetails,//查看详情
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    // 用于获取$refs
    const wzTbale = ref();

    const state = reactive({
      spinShow: false,//本页加载
      searchType: false,//搜索条件
      dateRange: [],
      seeMoreType: false,
      formDataSearch: {},//搜索表单数据
      formTitle: '',
      selectData: {},


      tableData: {
        url: apiUrl.riskInspectRiskInspectPageList,//请求地址
        method: 'post',//请求方式
        where: {
        },//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {
            title: '隐患排查', key: 'question', minWidth: 190,tooltip:true,resizable: true, render: (h, params) => {
              return h('Tooltip', { props: { content: params.row.riskInspectName, maxWidth: 190 } },
                  [h('div', { style: { cursor: 'pointer', overflow: "hidden", 'text-overflow': "ellipsis", display: "-webkit-box", "-webkit-line-clamp": 1, "-webkit-box-orient": "vertical" }, }, params.row.riskInspectName)]
              )
            }
          },
          {
            title: '排查类型', minWidth: 145, key: 'riskInspectType',tooltip:true,resizable: true, render: (h, params) => {
              //1：计划排查，2：主动排查
              var color = '', test = '';
              if (params.row.riskInspectType == 1) {
                color = 'primary', test = '计划排查';
              } else if (params.row.riskInspectType == 2) {
                color = 'success', test = '主动排查';
              }
              return h(resolveComponent('Tag'), {type: 'dot', color: color}, test);
            }
          },
          {
            title: '排查项目', minWidth: 90,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', params.row.riskPositionItemCheckCount + " / " + params.row.riskPositionItemAllCount + ' 项');
            }
          },
          {
            title: '隐患治理', minWidth: 90,tooltip:true,resizable: true, render: (h, params) => {
              return h('span', params.row.riskPositionItemAtFinCount + " / " + params.row.riskPositionItemAtCount + ' 项');
            }
          },
          {
            title: '排查状态', minWidth: 145, key: 'riskInspectState',tooltip:true,resizable: true, render: (h, params) => {
              //0：未开始，1：排查中，2：已完成）
              var color = '', test = '';
              if (params.row.riskInspectState == 0) {
                color = 'error', test = '未完成';
              } else if (params.row.riskInspectState == 1) {
                color = 'success', test = '已完成';
              }
              return h(resolveComponent('Tag'), {type: 'dot', color: color}, test);
            }
          },
          {title: '隐患清单', minWidth: 145, key: 'riskPositionName',tooltip:true,resizable: true},
          {
            title: '清单类型', minWidth: 145, key: 'riskPositionType',tooltip:true,resizable: true, render: (h, params) => {
              //  （1：基础管理、2：设备设施、3：作业活动）
              if (params.row.riskPositionType == 1) {
                return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '基础管理');
              } else if (params.row.riskPositionType == 2) {
                return h(resolveComponent('Tag'), {type: 'dot', color: 'primary'}, '设备设施');
              } else if (params.row.riskPositionType == 3) {
                return h(resolveComponent('Tag'), {type: 'dot', color: 'warning'}, '作业活动');
              }
            }
          },
          {
            title: '特种设备', minWidth: 100, key: 'riskPositionDeviceState',tooltip:true,resizable: true, render: (h, params) => {
              return h('span', !!params.row.riskPositionDeviceState ? '是' : '否');
            }
          },
          {title: '排查部门', minWidth: 145, key: 'riskInspectInOrgName',tooltip:true,resizable: true},
          {
            title: '排查人员', minWidth: 145, key: 'riskInspectUserName',tooltip:true,resizable: true, render: (h, params) => {
              return h('span', !!params.row.riskInspectUserName ? params.row.riskInspectUserName : '--');
            }
          },
          {
            title: '时间范围', minWidth: 180,tooltip:true,resizable: true,render: (h, params) => {
              return h('span', params.row.riskInspectStartDate + ' 至 ' + params.row.riskInspectEndDate)
            }
          },
          {title: '经营企业', minWidth: 260, key: 'deptName',tooltip:true,resizable: true},
          {title: '创建时间', minWidth: 160, key: 'createTime',tooltip:true,resizable: true},
          {
            title: '操作', fixed: 'right', width: 100,
            render: (h, params) => {
              var operationButtons = [];

              operationButtons.push(
                  h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick: () => {
                      state.selectData =  JSON.parse(JSON.stringify(params.row));
                      state.seeMoreType = true;
                    }
                  }, "查看")
              )
              return operationButtons;
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },


    });

    //搜索
    const searchSubmit = ()=> {
      let data = JSON.parse(JSON.stringify(state.formDataSearch));
      if(state.dateRange && state.dateRange.length >= 2 && state.dateRange[0]){
        data.riskInspectItemTimeBegin = $common.timeFormatting(state.dateRange[0],'yyyy-MM-dd') + ' 00:00:00'
        data.riskInspectItemTimeEnd = $common.timeFormatting(state.dateRange[1],'yyyy-MM-dd') + ' 23:59:59'
      }
      state.tableData.where = data;
      wzTbale.value.tableLoadData(true)
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      wzTbale,
      searchSubmit,//搜索
    }
  }
})


</script>

<style lang="less">
._wz_hiddenPerils {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>

